<template>
	<view class='refreshBox' :style="[ isTranform ]" :class="[ isEnd == 2 && 'refreshBack' ]">
		<view class="refresh-icon" :style="[ refreshCircle ]" :class="[ isEnd == 1 && 'animation' ]">
			<u-icon :style="[{'opacity': isTranf < 100? `${isTranf / 100 }`: 1}]" name="reload" size="50" :color="color"></u-icon>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'refresh',
		data() {
			return {
				isTranf: 0,
				touchStart: '',
				touchMove: '',
				isEnd: 0
			};
		},
		props: {
			color: {
				type: String,
				default: '#000'
			},
			isCanRefresh: {
				type: Boolean,
				default: true
			},
			offset: {
				type: [Number, String],
				default: 0
			}
		},
		methods: {
			refreshStart(e) {
				if (this.isEnd == 0 && this.isCanRefresh) {
					this.touchStart = e.changedTouches[0].pageY
				}
			},
			refreshMove(e){
				if (this.isEnd == 0 && this.isCanRefresh) {
					var touchStart = this.touchStart,
						oldMove = this.touchMove,
						newMove = e.changedTouches[0].pageY
					if (touchStart <= newMove) {
						this.$emit('toHiddenPage');
						var isTranf = touchStart > newMove ? 0 : newMove - touchStart
						if(isTranf <= 200) {
							this.isTranf = isTranf
							this.touchMove = e.changedTouches[0].pageY
						}
					}else {
						let move = 0
						if(touchStart - newMove > 36) {
							move = 36
						}else {
							move = touchStart - newMove
						}
						this.isTranf = -move
						this.isEnd = 0
					}
				} else{
					this.isTranf = 0
					this.isEnd = 0
					this.touchStart = 9999
				}
			},
			refreshEnd(e) {
				var that = this
				if (this.isEnd == 0 && this.isCanRefresh) {
					if (this.isTranf >= 100) {
						this.isTranf = 100
						this.isEnd = 1
						this.$emit('toRefresh');
					} else {
						this.isTranf = -36
						this.isEnd = 2
						setTimeout(() => {
							this.isTranf = 0
							this.isEnd = 0
						}, 200)
					}
				}
			},
			stopPullDownRefresh(){
				setTimeout(() => {
					this.isTranf = 0
					this.isEnd = 0
				}, 500)
			},
			closeRefresh() {
				this.isTranf = 0
				this.isEnd = 0
			}
		},
		computed: {
			refreshCircle() {
				let rotate = {
					'transform': `rotate(${this.isTranf*3}deg)`,
				}
				return rotate
			},
			isTranform() {
				if(this.isTranf > 0) {
					return {
						'top': `${this.offset - 36}px`,
						'z-index': 1000,
						'transform': ` translateY(${this.isTranf}px)`
					}
				}else {
					return {
						'top': `${this.offset}px`,
						'z-index': -1,
						'transform': ` translateY(${this.isTranf}px)`
					}
				}
			},
			
		}

	}
</script>

<style lang="scss" scoped>
	.refreshBox {
		margin:0 auto;
		width: 100%;
		height: 36px;
		position: fixed;
		display: flex;
		justify-content: center;
		top: 0;
		left: 0;
		z-index: -1;
	}
	.refreshBack {
		transition: all 0.2s;
	}
	
	.refresh-icon {
		width: 36px;
		height: 36px;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 4px;
		border-radius: 50%;
		background-color: $theme-white;
		box-shadow: 0 0 4px 4px rgba(0, 0, 0, 0.1);
	}
	

	.animation {
		animation: rotate 1.1s infinite;
	}

	@keyframes rotate {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}
</style>
